<template>
	<view>
		<view class="" style="position: fixed;left: 30rpx;z-index: 99;background-color: #F2F4F7;">
			<view class="sel flex_between" @click="clickshow(send_question.value)">
				<view class="">{{send_question.title}}</view>
				<image src="../../static/goin.png" mode=""></image>
			</view>
			<view class="sel flex_between" @click="clickshow(shoper_question.value)">
				<view class="">{{shoper_question.title}}</view>
				<image src="../../static/goin.png" mode=""></image>
			</view>
			<view class="sel flex_between" @click="clickshow(withdrawal_question.value)">
				<view class="">{{withdrawal_question.title}}</view>
				<image src="../../static/goin.png" mode=""></image>
			</view>
		</view>
		<view class="" :style="`height: ${serviceheight}px;`">

		</view>
		<scroll-view scroll-y="true" :style="`height: ${scrollheight-keyboardMaxHeight}px;`"
			:scroll-into-view='scrollinto'>
			<view class="" style="padding-top: 20rpx;">
				<view class="" v-for="(item,index) in contentList" :key="index" :id="`id_${index}`">
					<view class="fleft" v-if="item.type==1">
						<image src="../../static/kefu.png" mode=""></image>
						<view class="isText">{{item.content}}</view>
					</view>
					<view class="fright" v-if="item.type==0">
						<view class="isText">{{item.content}}</view>
						<image src="../../static/LUCK.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="">
				<view class="fleft" v-for="(item,index) in question" :key="index" :id="`id_${index}`">
					<image src="../../static/kefu.png" mode=""></image>
					<view class="isText">{{item.content}}</view>
				</view>
			</view>
		</scroll-view>
		<view class="inbottom" :style="{height:keyboardMaxHeight+'px'}">
			<view class="botinput flex_between" :style="'bottom:'+keyboardMaxHeight+'px;'">
				<view class="bginput flex" :style="value?'width:500rpx':''">
					<textarea :auto-height="true" type="text" style="width: 460rpx;padding: 20rpx;padding-left: 10rpx;"
						v-model="value" placeholder="发送消息" @focus='keychange' @confirm="onsendMsg(value)"
						placeholder-class="colinput" />
				</view>
				<image src="../../static/biaoqing.png" mode="" @click="emojiIs"></image>
				<view class="send" v-if="value" @click="onsendMsg(value)">发送</view>
			</view>
			<scroll-view :scroll-y="true" v-if="emojiIsShow" class="emojiListBox"
				:style="{height:keyboardMaxHeight+'px'}">
				<text v-for="(uniCodeEmoji,index) in emojiCodes" :key="index"
					@click.stop="clickEmojiItem(uniCodeEmoji,$event)" class="emoji-item">{{uniCodeEmoji}}</text>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import WebSocketClass from '@/util/webSocket.js'
	import emojiCodes from '@/util/emojiCodes';
	export default {
		data() {
			return {
				msg: '',
				value: '',
				emojiCodes: emojiCodes,
				emojiIsShow: false,
				keyboardMaxHeight: 0,
				shoper_question: {},
				withdrawal_question: {},
				shopershow: false,
				withdrawalshow: false,
				contentList: [],
				scrollheight: 0,
				scrollinto: '',
				question: [],
				send_question: {},
				serviceheight: 0
			}
		},
		onLoad() {
			// if (getApp().globalData.socketObj) {
			// 	// 如果sockt实例未连接
			// 	if (!getApp().globalData.socketObj.isConnect) {
			// 		getApp().globalData.socketObj.initSocket()
			// 	}
			// } else {
			// 	// 如果没有sockt实例，则创建
			// 	getApp().globalData.socketObj = new WebSocketClass(
			// 		`ws://124.222.224.186:8800`,
			// 		60
			// 	)
			// 	getApp().globalData.socketObj.initSocket()
			// }
			// uni.$on('message', this.getMessage)
			this.scrollheight = uni.getWindowInfo().windowHeight - 52 - 120
			this.getService()
			this.getContentList()
		},
		methods: {
			getService() {
				this.$fun.ajax.post('user/service', {}).then(res => {
					let servicelength = Object.keys(res.data).length
					this.scrollheight = uni.getWindowInfo().windowHeight - 52 - (servicelength * 40) - 40
					this.serviceheight = servicelength * 40 + 40
					this.send_question = res.data.send_question
					this.shoper_question = res.data.shoper_question
					this.withdrawal_question = res.data.withdrawal_question
				})
			},
			getContentList() {
				this.$fun.ajax.post('user/contentList', {}).then(res => {
					this.contentList = res.data
					this.$nextTick(function() {
						this.scrollinto = `id_${res.data.length-1}`
					})
				})
			},
			getMessage(res) {
				console.log(res)
				this.msg = res.data
			},
			clickshow(value, type) {
				let data = {
					content: value,
					type: type == 0 ? type : 1,
					createtime: new Date().getTime(),
					id: this.contentList.length + 1
				}
				this.contentList.push(data)
				this.$nextTick(function() {
					this.scrollinto = `id_${this.contentList.length-1}`
				})
			},
			onsendMsg(value) {
				this.$fun.ajax.post('user/sendContent', {
					content: this.value
				}).then(res => {
					this.clickshow(value, 0)
					this.value = ''

				})


				// getApp().globalData.socketObj.sendMsg(value)
				// uni.onKeyboardHeightChange(res => {
				// 	console.log(res.height)
				// 	uni.showToast({
				// 		title: res.height
				// 	})
				// 	let _this = this
				// 	_this.keyboardMaxHeight = res.height
				// })
				// this.value = ''
			},
			clickEmojiItem(emojiUniCode, e) {
				this.value += emojiUniCode
			},
			emojiIs() {
				this.emojiIsShow = true;
				this.keyboardMaxHeight = 200
			},
			keychange($event) {
				this.keyboardMaxHeight = 0
				this.emojiIsShow = false;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: $uni-bg-color;
	}

	.sel {
		width: 690rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		margin: 20rpx auto;
		padding: 0 20rpx;

		image {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.fleft {
		margin-left: 14rpx;
		margin-top: 30rpx;
		padding-bottom: 30rpx;
		display: flex;

		image {
			width: 72rpx;
			height: 72rpx;
			border-radius: 50%;
			margin: 0 16rpx;
			border: 1rpx solid #FFFFFF;
		}

		.isText {
			font-weight: 400;
			font-size: 28rpx;
			color: #19181A;
			max-width: 60%;
			// height: 68rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 20rpx 18rpx;
			position: relative;

			&::after {
				content: "";
				position: absolute;
				border: 10px solid transparent;
				border-radius: 10px;
				// bottom: -20px;
				/* 位于气泡下方 */
				left: -10px;
				top: 20rpx;
				/* 可以调整位置 */
				border-top-color: #FFFFFF;
				/* 与背景色一致 */
			}
		}
	}

	.fright {
		display: flex;
		justify-content: flex-end;
		margin-right: 14rpx;
		margin-top: 30rpx;
		padding-bottom: 30rpx;

		image {
			width: 72rpx;
			height: 72rpx;
			border-radius: 50%;
			margin: 0 16rpx;
			border: 1rpx solid #FFFFFF;
		}

		.isText {
			font-weight: 400;
			font-size: 28rpx;
			color: #19181A;
			// width: 206rpx;
			max-width: 60%;
			// height: 68rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 20rpx 18rpx;
			position: relative;

			&::after {
				content: "";
				position: absolute;
				border: 10px solid transparent;
				border-radius: 10px;
				// bottom: -20px;
				/* 位于气泡下方 */
				right: -10px;
				top: 20rpx;
				/* 可以调整位置 */
				border-top-color: #FFFFFF;
				/* 与背景色一致 */
			}
		}
	}

	.inbottom {
		position: fixed;
		bottom: 0;
		background: #FFFFFF;
	}

	.emojiListBox {
		padding: 10rpx 20rpx;

		text {
			font-size: 42rpx;
			margin: 10rpx;
		}
	}

	.botinput {
		width: 750rpx;
		// height: 120rpx;
		background: #FFFFFF;
		padding: 10rpx 30rpx;
		position: fixed;
		bottom: 0;

		.send {
			color: #FFFFFF;
			background: #4D88FF;
			width: 120rpx;
			height: 60rpx;
			border-radius: 10rpx;
			text-align: center;
			line-height: 60rpx;
			margin-left: 10rpx;
			font-size: 24rpx;
		}

		.bginput {
			width: 596rpx;
			min-height: 84rpx;
			background: #F6F6F6;
			border-radius: 42rpx;
			padding-left: 30rpx;
		}

		.colinput {
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
		}

		image {
			width: 64rpx;
			height: 64rpx;
		}
	}
</style>